<template>
	<view class="post-container">
		<swiper indicator-dots autoplay circular class="swiper-images">
			<swiper-item v-for="item in post.images" :key="item">
				<image :src="item.url"/>
			</swiper-item>
		</swiper>
		<view class="author-wrapper">
			<image class="author-avatar" :src="post.userVO.avatarUrl"></image>
			<view class="author-name">{{ post.userVO.nickname }}</view>
		</view>
		<view class="post-title">{{ post.title }}</view>
		<view class="post-stat">
			<uv-icon name="eye"></uv-icon>
			<text>{{ post.reads }}</text>
			<uv-icon name="heart"></uv-icon>
			<text>{{ post.likes }}</text>
			<uv-icon name="chat"></uv-icon>
			<text>{{ post.comments }}</text>
			<uv-icon name="clock"></uv-icon>
			<text>{{ post.updateTime }}</text>
		</view>
		<view class="post-content">
			{{ post.content }}
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			postId: 0,
			post: {}
		};
	},
	onLoad(options) {
		if (options) {
			this.postId = options.id;
			this.handleGetPostDetail(this.postId);
		}
	},
	methods: {
		async handleGetPostDetail(id) {
			// 调用API获取文章详情
			const res = await request(`/forum/postDetail?id=${id}`);
			this.post = res.data;
		}
	}
};
</script>

<style lang="scss">
.post-container {
	padding: 20rpx;

	.swiper-images {
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.author-wrapper {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.author-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.author-name {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.post-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.post-stat {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		color: #666;
		font-size: 24rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.post-content {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 1.5;
		font-family: 'Microsoft YaHei', sans-serif;
		color: #333;
	}
}
</style>
